<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>农资商城销售系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/admin/css/layui.css}">
    <link rel="stylesheet" th:href="@{/admin/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/editor.md/css/editormd.min.css}">
    <script type="text/javascript" th:src="@{/admin/js/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/admin/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/global.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{/editor.md/lib/marked.min.js}"></script>
    <script type="text/javascript" th:src="@{/editor.md/lib/prettify.min.js}"></script>
    <script type="text/javascript" th:src="@{/editor.md/editormd.js}"></script>
    <script type="text/javascript" th:src="@{/js/uploadImg.js}"></script>
    <style>
        .editormd-form label {
            width: 105px;
        }
    </style>
</head>
<body>



<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    <span class="x-red">*</span>名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="title" name="title" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="typeid" class="layui-form-label">
                    <span class="x-red">*</span>商品类型</label>
                <div class="layui-input-inline">
                    <select name="typeid" id="typeid" lay-search="">
                        <option value="0">请选择商品类型</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="img" class="layui-form-label">
                    <span class="x-red">*</span>主图</label>
                <div class="layui-input-inline">
                    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                        <i class="layui-icon layui-icon-upload"></i>
                        <div>点击上传，或将文件拖拽到此处</div>
                        <div class="layui-hide" id="ID-upload-demo-preview">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 100%;height: 100px;">
                        </div>
                    </div>
                    <input type="text" name="img" id="img" style="display: none">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="price" class="layui-form-label">
                    <span class="x-red">*</span>价格</label>
                <div class="layui-input-inline">
                    <input type="number" id="price" name="price" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="stock" class="layui-form-label">
                    <span class="x-red">*</span>库存</label>
                <div class="layui-input-inline">
                    <input type="number" id="stock" name="stock" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="typeid" class="layui-form-label">
                    <span class="x-red">*</span>状态</label>
                <div class="layui-input-inline">
                    <select name="state" id="state" lay-search="">
                        <option value="1" selected>上架</option>
                        <option value="2">下架</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="time" class="layui-form-label">
                    <span class="x-red">*</span>发布时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="time" name="time" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label for="describe" class="layui-form-label">
                    <span class="x-red">*</span>描述</label>
                <div class="layui-input-inline">
                    <textarea placeholder="请输入内容" id="describe" name="describe" lay-verify="required"
                              class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label for="detail" class="layui-form-label">
                    <span class="x-red">*</span>详情</label>
                <div class="layui-input-inline" style="width: 100%;height: 500px;">
                    <input type="hidden" id="detail" name="detail" >
                    <input type="hidden" id="detailhtml" name="detailhtml" >
                    <div id="test-editormd" style="width: 100%;height: 100%;"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="add" lay-submit>添加</button>
            </div>
        </form>
    </div>
</div>
<script>
    var editor;
    $(function() {

         editor = editormd("test-editormd", {
            width: "100%", //宽度
            height: "500px", //高度
            markdown: "", // 编辑器中初始内容
            imageUpload: true, //是否开启上传图片功能
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "mp4"], //支持的类型
            imageUploadURL: "/upload/img", //上传图片的接口地址
            onload: function() {
                //初始化  支持复制，粘贴，拖拽上传文件。
                initPasteDragImg(this); //必须
            },
            theme: "dark", //工具栏的背景
            previewTheme: "dark", //预览模块的背景
            editorTheme: "pastel-on-dark", //编辑模块的背景
            codeFold: true, //代码折叠
            saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
            // searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            tocm: true, // Using [TOCM]
            tex: true, // 开启科学公式TeX语言支持，默认关闭
            flowChart: true, // 开启流程图支持，默认关闭
            sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            path: "/editor.md/lib/"
        });
    });

    layui.use(['form', 'layer', 'jquery', 'laydate','upload'],
    function () {
        $ = layui.jquery;
        var form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            layer = layui.layer;

        //查询所有分类
        $.get(prefix+'/type/findAll', function (res) {
            if (res.code === 200) {
                let data = res.data;
                //循环遍历加入到下拉列表中typeid
                for (let i = 0; i < data.length; i++) {
                    let option = '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    $("#typeid").append(option);
                }
            }
            form.render('select');
        })

        //日期
        laydate.render({
            elem: '#time',
        });

        upload.render({
            elem: '#ID-upload-demo-drag',
            url: '/upload/img', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                layer.load();
            },
            done: function (res) {
                layer.closeAll('loading');
                if (res.code===200){
                    layer.msg('上传成功');
                    $('#ID-upload-demo-preview').removeClass('layui-hide')
                        .find('img').attr('src', res.msg);
                    $("#img").val(res.msg);
                }else{
                    layer.msg(res.msg);
                }
            },
            error: function(){
                layer.closeAll('loading');
                return layer.msg("网络繁忙，请稍后再试！！！");
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            data.field.detail=editor.getMarkdown();
            data.field.detailhtml=editor.getHTML();
            //判断价格是否是两位小数，是否大于等于0
            let price = data.field.price; // 获取价格
            if (price < 0) {
                layer.msg("价格必须大于等于0")
                return false;
            } else { // 使用正则表达式判断是否符合规则
                let regexPattern = /^\d+(\.\d{1,2})?$/;
                if (!regexPattern.test(price)) {
                    layer.msg("价格最多只能保留两位小数")
                    return false;
                }
            }
            let stock = data.field.stock; // 获取库存
            let regexPattern = /^[1-9]\d*$/; // 正整数的正则表达式
            if (!regexPattern.test(stock)) { // 判断数字是否符合正则表达式
                layer.msg("库存只能是正整数")
                return false;
            }
            if ($("#img").val() === ""){
                layer.msg("请上传图片")
                return false;
            }
            //判断是否选择分类
            let typeid = data.field.typeid;
            if (typeid === 0 || typeid === "0") {
                layer.msg("请选择分类")
                return false;
            }
            $.post(prefix+'/goods/add', data.field, function (res) {
                if (res.code === 200) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 2000
                    }, function () {
                        //关闭当前frame
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000
                    });
                }
            })
            return false;
        });

    });</script>
</body>

</html>